<template>
  <div class="dialog-main">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="个人信息 " name="first" class="basicInfo">
        <div class="title">基本信息</div>
        <el-row>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              姓名
              <span>{{ ruleForm.name }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              身份证
              <span>{{ ruleForm.id_card }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              年龄
              <span>{{ ruleForm.age }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              性别
              <span>{{ ruleForm.sex | sexFilter }}</span>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              出生日期
              <span>{{ ruleForm.birthday }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              宗教信仰
              <span>{{ ruleForm.religion | religionFilter }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              民族
              <span>{{ ruleForm.nation | nationFilter }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              联系方式
              <span>{{ ruleForm.mobile }}</span>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              婚姻状态
              <span>{{ ruleForm.marry | marryFilter }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              老人类型
              <span>{{ ruleForm.type | typeFilter }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              居住情况
              <span>{{ ruleForm.live_status | liveStausFilter }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              经济来源
              <span>{{ ruleForm.finance_source | moneyFilter }}</span>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              户籍地址
              <span>{{ ruleForm.address }}</span>
            </p>
          </el-col>
        </el-row>
        <div class="title">健康情况</div>
        <el-row>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              介护等级
              <span>{{ healthForm.dj | djFilter }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              听力
              <span>{{ healthForm.tl | tlFilter }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              视力
              <span>{{ healthForm.sl | slFilter }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              体重
              <span>{{ healthForm.tz }}</span>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              传染病
              <span>{{ healthForm.crb | crbFilter }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              主要疾病
              <span>{{ healthForm.jb }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              遗传病史
              <span>{{ healthForm.ycb | ycbFilter }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              过敏史
              <span>{{ healthForm.gms | gmFilter }}</span>
            </p>
          </el-col>
        </el-row>
        <div class="title">家族病史</div>
        <el-row>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              父亲
              <span>{{ healthForm.f | familyFilter }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              母亲
              <span>{{ healthForm.m | familyFilter }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              兄弟姐妹
              <span>{{ healthForm.x | familyFilter }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              子女
              <span>{{ healthForm.z | familyFilter }}</span>
            </p>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="体检记录 " name="second">
        <el-table
          :data="elderhealth.list"
          stripe
          :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
        >
          <el-table-column
            v-for="(item, index) in tableColumns1"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="item.formatter"
            :filters="item.filters"
            :class-name="item.className"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="elderhealth.page"
          layout="total, prev, pager, next, jumper"
          :total="elderhealth.total"
          :page-size="elderhealth.page_size"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="饮食记录 " name="third">
        <el-table
          :data="eldermeal.list"
          stripe
          :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
        >
          <el-table-column
            v-for="(item, index) in tableColumns2"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="item.formatter"
            :filters="item.filters"
            :class-name="item.className"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="eldermeal.page"
          layout="total, prev, pager, next, jumper"
          :total="eldermeal.total"
          :page-size="eldermeal.page_size"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="用药记录" name="fourth">
        <el-table
          :data="eldermedicine.list"
          stripe
          :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
        >
          <el-table-column
            v-for="(item, index) in tableColumns3"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="item.formatter"
            :filters="item.filters"
            :class-name="item.className"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="eldermedicine.page"
          layout="total, prev, pager, next, jumper"
          :total="eldermedicine.total"
          :page-size="eldermedicine.page_size"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="评估记录" name="five">
        <el-table
          :data="elderhealthtest.list"
          stripe
          :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
        >
          <el-table-column
            v-for="(item, index) in tableColumns4"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="item.formatter"
            :filters="item.filters"
            :class-name="item.className"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="elderhealthtest.page"
          layout="total, prev, pager, next, jumper"
          :total="elderhealthtest.total"
          :page-size="elderhealthtest.page_size"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
    <!-- <div v-if="activeName !== 'first'" class="searchTk">
      <el-row :gutter="20">
        <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
          <el-date-picker
            v-model="selectForm.startTime"
            value-format="timestamp"
            format="yyyy 年 MM 月 dd 日"
            placeholder="开始"
            size="mini"
            :picker-options="dataPickerBeforeTodayOptions"
            style="width: 180px"
          ></el-date-picker>
          <span style="padding: 0 10px">~</span>
          <el-date-picker
            v-model="selectForm.endTime"
            value-format="timestamp"
            format="yyyy 年 MM 月 dd 日"
            placeholder="结束"
            size="mini"
            :picker-options="dataPickerBeforeTodayOptions"
            style="width: 180px"
          ></el-date-picker>
          &nbsp;
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-search"
            class="fr"
          >
            搜索
          </el-button>
        </el-col>
      </el-row>
    </div> -->
  </div>
</template>
<script>
  import { getBed } from "@/api/building";
  import dictData from "@/utils/dictionary";
  import {
    eldermeal,
    eldermedicine,
    elderhealthtest,
    healthRecord,
  } from "@/api/caseApi";
  export default {
    name: "Index",
    components: {},
    filters: {
      sexFilter(val) {
        return val == 1 ? "男" : "女";
      },
      religionFilter(val) {
        for (let index = 0; index < dictData.religion.length; index++) {
          const element = dictData.religion[index];
          if (index + 1 == val) {
            return element;
          }
        }
      },
      nationFilter(val) {
        for (let index = 0; index < dictData.nation.length; index++) {
          const element = dictData.nation[index];
          if (index + 1 == val) {
            return element;
          }
        }
      },
      marryFilter(val) {
        for (let index = 0; index < dictData.marry.length; index++) {
          const element = dictData.marry[index];
          if (index + 1 == val) {
            return element;
          }
        }
      },
      typeFilter(val) {
        for (let index = 0; index < dictData.olderType.length; index++) {
          const element = dictData.olderType[index];
          if (index + 1 == val) {
            return element;
          }
        }
      },
      liveStausFilter(val) {
        for (let index = 0; index < dictData.live_status.length; index++) {
          const element = dictData.live_status[index];
          if (index + 1 == val) {
            return element;
          }
        }
      },
      moneyFilter(val) {
        for (let index = 0; index < dictData.finance_source.length; index++) {
          const element = dictData.finance_source[index];
          if (index + 1 == val) {
            return element;
          }
        }
      },
      djFilter(val) {
        for (let index = 0; index < dictData.dj.length; index++) {
          const element = dictData.dj[index];
          if (index + 1 == val) {
            return element;
          }
        }
      },
      tlFilter(val) {
        for (let index = 0; index < dictData.tl.length; index++) {
          const element = dictData.tl[index];
          if (index + 1 == val) {
            return element;
          }
        }
      },
      slFilter(val) {
        for (let index = 0; index < dictData.sl.length; index++) {
          const element = dictData.sl[index];
          if (index + 1 == val) {
            return element;
          }
        }
      },
      crbFilter(val) {
        if (val == 1) {
          return "有";
        } else {
          return "无";
        }
      },
      ycbFilter(val) {
        if (val == 1) {
          return "有";
        } else {
          return "无";
        }
      },
      gmFilter(val) {
        if (val == 1) {
          return "有";
        } else {
          return "无";
        }
      },
      familyFilter(val) {
        let str = "";
        let valArr = [];
        if (val) valArr = val.split(",");
        for (let i = 0; i < valArr.length; i++) {
          const el = valArr[i];
          for (let index = 0; index < dictData.family.length; index++) {
            const element = dictData.family[index];
            if (element.id == el) {
              str += element.value + "，";
            }
          }
        }
        return str.substring(0, str.length - 1);
      },
    },
    props: {
      data: {
        type: Object,
        default() {
          return {};
        },
      },
    },
    data() {
      return {
        activeName: "first",
        addressData: [],
        nursingData: [],
        foodData: [],
        liveForm: {},
        tryForm: {},
        ruleForm: {},
        bedForm: {},
        relateForm: {},
        healthForm: {
          jbArr: [],
        },
        elderhealth: { type: 0, page: 1, total: 0, page_size: 5, list: [] },
        eldermeal: { type: 0, page: 1, total: 0, page_size: 5, list: [] },
        eldermedicine: { type: 0, page: 1, total: 0, page_size: 5, list: [] },
        elderhealthtest: { type: 0, page: 1, total: 0, page_size: 5, list: [] },
        tableColumns1: [
          { prop: "check_time", label: "体检时间" },
          { prop: "tw", label: "体温（℃）" },
          { prop: "xy", label: "血压（mmHg）" },
          { prop: "xt", label: "血糖（mmHg）" },
          { prop: "xl", label: "心率" },
          { prop: "action_name", label: "体检人" },
        ],
        tableColumns2: [
          { prop: "action_time", label: "记录日期" },
          { prop: "morning", label: "早餐", formatter: this.morningFormat },
          { prop: "noon", label: "午餐", formatter: this.noonFormat },
          { prop: "night", label: "晚餐", formatter: this.nightFormat },
          { prop: "inc", label: "加餐", formatter: this.incFormat },
          { prop: "action_name", label: "登记人" },
        ],
        tableColumns3: [
          { prop: "create_time", label: "记录日期" },
          { prop: "action_time", label: "用药时间" },
          { prop: "cause", label: "服药原因" },
          { prop: "name", label: "药品名称" },
          { prop: "explain", label: "服药说明" },
          { prop: "record_name", label: "登记人" },
          { prop: "action_name", label: "责任人" },
          { prop: "remark", label: "备注" },
        ],
        tableColumns4: [
          { prop: "action_time", label: "记录日期" },
          {
            prop: "daily_result",
            label: "日常生活活动能力",
            formatter: this.valueFormat,
          },
          {
            prop: "spirit_result",
            label: "精神状态",
            formatter: this.valueFormat2,
          },
          {
            prop: "feel_result",
            label: "感知与沟通能力",
            formatter: this.valueFormat3,
          },
          {
            prop: "s_result",
            label: "社会参与能力",
            formatter: this.valueFormat4,
          },
          {
            prop: "test_result",
            label: "综合评定",
            formatter: this.valueFormat5,
          },
          { prop: "action_name", label: "评估人" },
        ],
        selectForm: {},
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {},
        },
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      if (JSON.stringify(this.data) !== "{}") {
        if (this.data.base && JSON.stringify(this.data.base) != "{}") {
          this.ruleForm = this.data.base;
          let areaArr = [];
          if (this.ruleForm.area) areaArr = this.data.base.area.split(",");
          this.$set(this.ruleForm, "areaArr", areaArr);
          if (this.data.base.id) this.baseId = this.ruleForm.id;
          this.areaString = this.ruleForm.area_name;
          // console.log(this.ruleForm);
        }
        if (this.data.fees && JSON.stringify(this.data.fees) != "{}") {
          this.liveForm = this.data.fees;
          let floor_idsArr = [];
          if (this.liveForm.floor_ids)
            floor_idsArr = this.liveForm.floor_ids.split(",");
          this.$set(this.liveForm, "floor_idsArr", floor_idsArr);
          let params = {
            id: floor_idsArr[floor_idsArr.length - 1],
          };
          this.getBedData(params);
        }

        if (this.data.bed && JSON.stringify(this.data.bed) != "{}")
          this.bedForm = this.data.bed;
        if (this.data.family && JSON.stringify(this.data.family) != "{}")
          this.relateForm = this.data.family;
        if (this.data.health && JSON.stringify(this.data.health) != "{}") {
          this.healthForm = this.data.health;
          let jbArr = [];
          if (this.healthForm.jb) jbArr = this.healthForm.jb.split(",");
          this.$set(this.healthForm, "jbArr", jbArr);
        }
      }
    },
    methods: {
      morningFormat(row) {
        let value = row.morning;
        if (value == 0) {
          return "无";
        } else if (value == 1) {
          return "有";
        }
      },
      noonFormat(row) {
        let value = row.noon;
        if (value == 0) {
          return "无";
        } else if (value == 1) {
          return "有";
        }
      },
      nightFormat(row) {
        let value = row.night;
        if (value == 0) {
          return "无";
        } else if (value == 1) {
          return "有";
        }
      },
      incFormat(row) {
        let value = row.inc;
        if (value == 0) {
          return "无";
        } else if (value == 1) {
          return "有";
        }
      },
      valueFormat(row) {
        let value = row.daily_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      valueFormat2(row) {
        let value = row.spirit_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      valueFormat3(row) {
        let value = row.feel_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      valueFormat4(row) {
        let value = row.s_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      valueFormat5(row) {
        let value = row.test_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      getBedData(data) {
        getBed("get", data).then((resp) => {
          if (resp.code === 200) {
            let data = resp.data;
            this.$set(this.liveForm, "bed_name", data.name);
            this.$set(this.liveForm, "price", data.price);
            this.$set(this.liveForm, "deposit", data.deposit);
          }
        });
      },
      handleClick(tab, event) {
        let params = {
          e_id: this.ruleForm.id,
        };
        if (tab.index == 1) {
          this.getelderhealth(params);
        } else if (tab.index == 2) {
          this.geteldermeal(params);
        } else if (tab.index == 3) {
          this.geteldermedicine(params);
        } else if (tab.index == 4) {
          this.getelderhealthtest(params);
        }
      },
      getelderhealth(paramOrder) {
        healthRecord("get", paramOrder).then((resp) => {
          if (resp.code === 200) {
            console.log(resp);
            this.elderhealth = resp.data;
          }
        });
      },
      geteldermedicine(paramOrder) {
        eldermedicine("get", paramOrder).then((resp) => {
          if (resp.code === 200) {
            console.log(resp);
            this.eldermedicine = resp.data;
          }
        });
      },
      geteldermeal(paramOrder) {
        eldermeal("get", paramOrder).then((resp) => {
          if (resp.code === 200) {
            console.log(resp);
            this.eldermeal = resp.data;
          }
        });
      },
      getelderhealthtest(paramOrder) {
        elderhealthtest("get", paramOrder).then((resp) => {
          if (resp.code === 200) {
            console.log(resp);
            this.elderhealthtest = resp.data;
          }
        });
      },
      handleChange(value) {
        console.log(value);
      },
      handleSizeChange() {},
      handleCurrentChange(val) {
        let param = {
          page: val,
          e_id: this.ruleForm.id,
        };
        if (this.activeName === "second") this.getelderhealth(param);
        if (this.activeName === "third") this.geteldermeal(param);
        if (this.activeName === "fourth") this.geteldermedicine(param);
        if (this.activeName === "five") this.getelderhealthtest(param);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .el-tabs {
    ::v-deep {
      .el-tabs__header {
        margin-bottom: 24px;
      }
    }
    .title {
      margin-bottom: 24px;
      font-size: 16px;
      color: #333333;
    }
    .el-row {
      margin-bottom: 24px;
      .el-col {
        p {
          color: #999999;
          font-size: 16px;
          span {
            padding-left: 5px;
            font-size: 16px;
            color: #333;
          }
        }
      }
    }
    ::v-deep {
      th {
        .cell {
          color: #fff;
        }
      }
    }
  }
  .dialog-main {
    position: relative;
    .searchTk {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
</style>
